<template>
	<view class="message">
		<view class="topbg syspadding">
			<view class="acea-row px30 mt-20">
				<text class="title bold">消息</text>
			</view>
			<view class="shaixuan">
				<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/1aebca94f55f81fca278e1487ba5d86b.png" mode=""></image>
			</view>
		</view>
		
		<view class="main">
			<scroll-view scroll-y="true" class="scroll-y" :style="'height:'+scrollviewHigh+'px;'">
				<block v-for="(item,index) in list" :key="index">
					<view class="item acea-row row-middle" @click="urlclick(item.id)">
						<view class="icon">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/69eeb39f7ccb498de82ef7d128cae216.png" mode=""></image>
						</view>
						<view class="text">
							<view class="acea-row row-between">
								<view class="line1 title">{{ item.title }}</view>
								<view class="time">{{ item.add_time }}</view>
							</view>
							<view class="acea-row row-between">
								<view class="line1 subtitle">{{ item.introduction }}</view>
								<!-- <view class="circle"></view> -->
							</view>
						</view>
					</view>
				</block>
				<view style="width: 100%;height: 220rpx;"></view>
			</scroll-view>
		</view>
		
		
		<tabbar :url="'/pages/index/message'"></tabbar>
	</view>
</template>

<script>
	import{
		messagesList
	} from '@/api/user.js'
	import tabbar from '../../components/tabbar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				scrollviewHigh:0,
				list:[],
				
			};
		},
		onShow() {
			uni.hideTabBar();
			this.init();
			this.getlist();
		},
		methods:{
			urlclick(id){
				uni.navigateTo({
					url: `/pages/index/msg_details?id=${id}`
				})
			},
			getlist(){
				let that = this;
				messagesList({
					page:1,
					limit:999
				}).then(res=>{
					that.list = res.data.data;
				})
			},
			/*初始化*/
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHeight = res.windowHeight;
						let h = _this.phoneHeight - 120;
						_this.scrollviewHigh = h;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.message{
		
		.topbg{
			width: 100%;
			height: 280rpx;
			background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/111a426c66dbbf9bb977c06b7ea16385.png');
			background-size: 100% 100%;
			
			.title{
				font-size: 44rpx;
				color: #ffffff;
				letter-spacing: 4rpx;
			}
			.shaixuan{
				width: 130rpx;
				height: 45rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;
			}
		}
		
		.main{
			width: 100%;
			border-radius: 40rpx;
			// padding: 30rpx;
			padding-left: 50rpx;
			// padding-top: 10rpx;
			margin-top: -30rpx;
			position: relative;
			background-color: #FFFFFF;
			
			.item~.item{
				border-top: 1rpx solid #F7F7F7;
			}
			.item{
				padding: 40rpx 50rpx 40rpx 0;
				
				.icon{
					width: 80rpx;
					height: 80rpx;
				}
				
				.text{ 
					margin-left: 40rpx;
					flex: 1;
					
					.title{
						color: #202123;
						font-size: 28rpx;
						font-weight: bold;
						width: 380rpx;
						letter-spacing: 4rpx;
					}
					.time{
						color: #B6B6B6;
						font-size: 22rpx;
						letter-spacing: 4rpx;
						margin-top: 10rpx;
					}
					.subtitle{
						color: #545456;
						font-size: 24rpx;
						width: 490rpx;
						margin-top: 5rpx;
						letter-spacing: 3rpx;
					}
					.circle{
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #E44E32;
						margin-top: 20rpx;
					}
				}
			}
			
		}
		
	}
</style>
 